<!--
 * @Author: your name
 * @Date: 2020-10-16 09:50:40
 * @LastEditTime: 2020-10-16 11:00:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \tpf-fore\src\frames\dashboard\views\init.vue
-->
<template>
  <div>
    <el-container>
      <el-header>
        <h1 class="init-title">初始化设置</h1>
      </el-header>
      <el-main>
        <!-- <el-form
          class="init-content"
          ref="loginForm"
          :model="form"
          :rules="rules"
          @keyup.enter.native="saveForm"
          @submit.native.prevent>
          <el-form-item prop="value">
            <el-input
              type="textarea"
              :rows="20"
              :disabled="!showSave"
              placeholder="请输入内容"
              v-model="form.value"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="8" class="align-center">
                <el-button type="primary" @click="editForm">编辑</el-button>
              </el-col>
              <el-col :span="8" class="align-center">
                <el-button type="success" v-show="showSave" @click="saveForm">保存</el-button>
              </el-col>
              <el-col :span="8" class="align-center">
                <el-button type="info" v-show="showCancel" @click="cancelForm">取消</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form> -->
        <el-form
          class="init-content"
          ref="initForm"
          :model="form"
          label-width="90px"
          :inline="true">
          <el-form-item label="文件名称:" prop="fileName" :rules="[
            { required: true, message: '文件名称不能为空', trigger: 'blur' }
          ]">
            <el-input placeholder="请输入文件名称" v-model="form.fileName"/>
          </el-form-item>
          <!-- 产品扩展字段 -->
          <div class="ext">
            <div class="num-content">
              <h1>扩展字段</h1>
              <div class="number" v-show="!isLook">
                <span class="button" @click="add()">+</span>
                <span class="num">{{form.ext.length}}</span>
                <span class="button" @click="reduce()">-</span>
              </div>
            </div>
            <div class="lists">
              <div class="item"
                v-for="(item, index) in form.ext"
                :key="index">
                <div class="del" v-show="!isLook" @click="delExs(item, index)"><i class="el-icon-circle-close"></i></div>
                <el-form-item label="名称:" :prop="'ext.'+ index +'.name'" :rules="[
                  { required: true, message: '名称不能为空', trigger: 'blur' }
                ]">
                  <el-input placeholder="请输入名称" v-model="item.name"></el-input>
                </el-form-item>
                <el-form-item label="值:" :prop="'ext.'+ index +'.value'" :rules="[
                  { required: true, message: '值不能为空', trigger: 'blur' }
                ]">
                  <el-input placeholder="请输入值" v-model="item.value"></el-input>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
        <el-row class="btn-content">
          <el-col :span="12" class="align-center">
            <el-button type="success" @click="saveForm">保存</el-button>
          </el-col>
          <el-col :span="12" class="align-center">
            <el-button type="info" @click="cancelForm">取消</el-button>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "init",
  data() {
    return {
      // form: {
      //   value: "",
      // },
      // rules: {
      //   value: [{ required: true, message: "请输入内容", trigger: "blur" }],
      // },
      // showSave: false,
      // showCancel: false,
      form: {
        fileName: '',
        ext: [
          {
            name: '',
            value: ''
          }
        ]
      }
    };
  },
  created() {},
  methods: {
    // editForm() {
    //   this.showSave = true;
    //   this.showCancel = true;
    // },
    
    // 加扩展字段
    add () {
      let exs = {
        name: '',
        value: '',
        list_order: this.form.ext.length + 1
      }
      this.form.ext.push(exs)
    },
    // 减扩展字段
    reduce () {
      if (this.form.ext.length === 1) {
        return false
      }
      this.form.ext.pop()
    },
    // 点击删除字段
    delExs (item, index) {
      if (this.form.ext.length === 0) {
        return false
      }
      let ex = this.form.ext.findIndex((ele) => {
        console.log(ele);
        return ele.list_order === item.list_order
      })
      this.form.ext.splice(ex, 1)
    },
    saveForm() {
      this.$refs["initForm"].validate(valid => {
        if (valid) {
          // 调接口
        }
      })
    },
    cancelForm() {
      this.form = {
        fileName: '',
        ext: [
          {
            name: '',
            value: ''
          }
        ]
      }
      this.$refs.initForm.resetFields()
    },
  },
};
</script>

<style scoped>
.init-title {
  text-align: center;
  font-size: 40px;
}
.init-content {
  width: 700px;
  margin: 20px auto;
  border: 1px solid #333;
  padding: 20px;
}
.btn-content {
  width: 700px;
  margin: 20px auto;
}
.btn-content .el-button {
  padding: 10px 40px;
}
.align-center {
  text-align: center;
}
</style>
<style lang="less" scoped>
.ext .num-content {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .number {
    position: absolute;
    right: 0;
    .button {
      font-size: 16px;
      color: #000;
      &:hover {
        cursor: pointer;
        color: #007aff;
      }
    }
    .num {
      font-size: 18px;
      color: #007aff;
      padding: 0 10px;
    }
  }
}
.ext {
  .lists {
    position: relative;
    padding-top: 10px;
    .item {
      position: relative;
      background: rgb(245, 246, 250);
      border-radius: 4px;
      padding: 20px 10px 0;
      margin-top: 10px;
    }
  }
  .del {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    i {
      font-size: 20px;
    }
    &:hover {
      i {
        color: #007aff;
      }
    }
  }
}
.ext .num-content h1 {
  font-size: 16px;
  color: #000;
}

</style>
